import React from 'react';
import './ProcessingProgress.css';

const ProcessingProgress = ({ 
  isVisible, 
  progress = 0, 
  step = '', 
  onCancel 
}) => {
  if (!isVisible) return null;

  return (
    <div className="processing-overlay">
      <div className="processing-modal">
        <div className="processing-header">
          <h3>🔄 正在处理图像</h3>
          {onCancel && (
            <button 
              className="cancel-btn" 
              onClick={onCancel}
              title="取消处理"
            >
              ✕
            </button>
          )}
        </div>
        
        <div className="processing-content">
          <div className="progress-container">
            <div className="progress-bar">
              <div 
                className="progress-fill" 
                style={{ width: `${progress}%` }}
              />
            </div>
            <div className="progress-text">
              {progress.toFixed(0)}%
            </div>
          </div>
          
          <div className="step-info">
            <span className="step-icon">⚙️</span>
            <span className="step-text">{step}</span>
          </div>
          
          <div className="processing-details">
            <div className="processing-spinner"></div>
            <p>请稍候，正在计算医学参数...</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProcessingProgress; 